<template>
    <div class="control">
        <view-head></view-head>
        <div class="control_c">
            <el-menu default-active="1-4-1" :router="true" @open="handleOpen" @close="handleClose" class="el-menu-vertical-demo"  :collapse="isCollapse">
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">策略设置</span>
                    </template>
                    <el-menu-item index="/control/ploy">使用策略</el-menu-item>
                    <el-menu-item index="/control/ployhistory">机器人历史</el-menu-item>
                </el-submenu>
                <el-menu-item index="/control/dayknot">
                    <i class="el-icon-menu"></i>
                    <span slot="title">日结报表</span>
                </el-menu-item>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">统计查询</span>
                    </template>
                    <el-menu-item index="/control/statistics">收益查询</el-menu-item>
                    <el-menu-item index="/control/log">日志查询</el-menu-item>
                </el-submenu>

            </el-menu>
            <div class="control-body" v-bind:class="{'collapse':isCollapse,'uncollapse':!isCollapse}">
                <i @click="collapseControl()" style="font-size: 30px; color: #333; background: #fff; position: fixed; cursor: pointer;" class="el-icon-menu"></i>
                <div class="c-body-son">
                    <router-view v-if="isRouterAlive"></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '@/components/__header.vue'
    export default {
        name: "control",
        components: {
            'view-head':Header,
        },
        created(){
            this.$router.push({name:'ploy'});
        },
        provide (){
            return {
                reload:this.reload
            }
        },
        data() {
            return {
                isCollapse: false,
                isRouterAlive:true
            };
        },
        methods: {
            collapseControl:function(){
                this.isCollapse=!this.isCollapse;
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            reload (){
                this.isRouterAlive = false
                this.$nextTick(function(){
                    this.isRouterAlive = true
                })
            }
        },
        beforeUpdate(){
            if(this.$router.history.current.path=="/control"){
                this.$router.push({name:'ploy'});
            }
        }
    }
</script>

<style scoped lang="scss">
    $width:200px;
    .control{
        .control_c{
            padding-top: 60px;
            .el-menu-vertical-demo:not(.el-menu--collapse) {
                width: $width;height: 100%; position: fixed; overflow: auto; z-index: 1000;
            }
            .el-menu{
                height: 100%; position: fixed; overflow: auto;z-index: 1000; margin-top: 2px;
            }
            .control-body{
                padding-top: 10px; position: relative;
                .c-body-son{
                    padding-left: 40px; padding-top: 40px;
                }
            }
            .uncollapse{
                padding-left: $width+10;
            }
            .collapse{
                padding-left: 75px;
            }
        }
    }
</style>
